<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/layui/layui.css">
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
            color: 12px;
        }
        .fc{
            color: brown;
        }
        .fs{
            font-size: 26px;
        }
        .bc{
            background-color: #dedede;
        }
        .border{
            border: 1px solid black;
        }
        p{
            margin: 15px!important;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>v-bind属性</h3>
        <!-- 
        v-bind指令完成对标签的属性动态绑定操作，取值规则等同于插值表达式，可以通过简写关键字 ：进行代码简化
            v-bind[:属性参数][.修饰符][.修饰符][……][= 取值]
            :[属性参数][.修饰符][.修饰符][……][= 取值]
                + 取值:根据属性规则加载合理数据【vue为特殊属性提供丰富的取值规则；html标签存在一些特殊的操作属性】
        -->
        <h4>基础使用</h4>
        <p v-bind:id="id">v-bind:id="id"</p>
        <p :id="id">:id="id"</p>

        <h4>boolean属性的动态绑定</h4>
        <!-- 
            1. html的boolean属性的操作 
                    标签上的boolean属性的定义和删除，实际上控制的是JS DOM对象对应的boolean类型属性的取值是true还是false;
                    vue在v-bind动态绑定boolean属性进行类型转换操作时，字符串无论取值 空字符串还是非空字符串转换结果都是 true;
                    其它类型数据和JS的转换规则一致;

         -->
        <input type="text">
        <input type="text" disabled>
        <br>
        <!-- 取值 boolean 类型数据 -->
        <input type="text" :disabled=" flag " placeholder="boolean变量">
        <input type="button" value="状态切换" @click="flag=!flag">
        <br>
        <input type="text" :disabled=" num " placeholder="number变量 num=10">
        <input type="button" value="启用文本框 num=0" @click="num=0">
        <br>
        <input type="text" :disabled=" str " placeholder="String变量 str='aa'">
        <input type="text" :disabled=" str!='' " placeholder="String变量 str='aa'">
        <input type="button" value="启用文本框 str=''" @click="str=''">

        <h4>class属性的动态绑定</h4>
        <!-- 
        ==> 动静结合绑定 ：标签同时完成一个属性的的 静态定义和动态定义;
                              vue会自动完成该属性的 静态值和动态值的组合操作;
                              v-bind指令 只对属性 class 和 style 提供动静规则;
                              剩余的属性依然使用就近原则

        2. class属性的操作
            v-bind:class=String|Array|Object
                + String : 遵循html标签的class取值定义规范
                + Array : vue对数组自动完成 class 取值规则的字符串转换操作，在vue中保留数组数据类型，可以借助数组方法完成快速的样式操作
                + Object : vue对 对象 进行自动循环，更具样式名对应的boolean结果，完成字符串转换操作，如果取值为true表示添加该样式，如果为false表示删除该样式
        -->
        <p class="fc fs bc border">class="fc fs bc border"</p>
        <p :class=" classStr ">:class=" classStr "  classStr="fc fs bc border"</p>
        <input type="button" value="删除fs样式" @click="removeClassStr('fs')">
        <input type="button" value="添加fs样式" @click="addClassStr('fs')">
        <input type="button" value="删除bc样式" @click="removeClassStr('bc')">
        <input type="button" value="添加bc样式" @click="addClassStr('bc')">

        <p :class=" classArr ">:class=" classArr "  classArr="[ "fsborder","fc","fs","bc","border" ]"</p>
        <input type="button" value="删除fs样式" @click="removeClassArr('fs')">
        <input type="button" value="添加fs样式" @click="addClassArr('fs')">
        <input type="button" value="删除bc样式" @click="removeClassArr('bc')">
        <input type="button" value="添加bc样式" @click="addClassArr('bc')">

        <p :class=" classObj ">:class=" classObj "  classObj="{fc:true,fs:true,bc:true,border:true}"</p>
        <input type="button" value="切换fs样式" @click="classObj.fs = !classObj.fs">
        <input type="button" value="切换bc样式" @click="classObj.bc = !classObj.bc">
        <input type="button" value="切换fc样式" @click="classObj.fc = !classObj.fc">
        <input type="button" value="切换border样式" @click="classObj.border = !classObj.border">

        <p :class=" { fc:isFc,fs:isFs,bc:isBc,border:isBorder } ">:class=" { fc:true,fs:true,bc:true,border:true } </p>
        <input type="button" value="切换fs样式" @click="isFs = !isFs">
        <input type="button" value="切换bc样式" @click="isBc = !isBc">
        <input type="button" value="切换fc样式" @click="isFc = !isFc">
        <input type="button" value="切换border样式" @click="isBorder = !isBorder">

        <p :class="{ fc:userInput.length<=5 }">userInput:{{ userInput }}</p>
        <input type="text" @input=" userInput = $event.target.value ">

        <br><br>
        <input class="layui-btn layui-btn-normal" type="button" value="layui">
        <br><br>
        <input :class="btnObj" type="button" value="layui">
        <br><br>
        <input type="button" value="在normal和default之间进行切换" @click=" btnObj['layui-btn-normal'] = !btnObj['layui-btn-normal'] ">
        <br><br>
        <input class="layui-btn" :class="{ 'layui-btn-normal':isDef }" type="button" value="layui">
        <br><br>
        <input type="button" value="在normal和default之间进行切换" @click=" isDef=!isDef ">

        <h4>style属性的绑定</h4>
        <!-- 
        3. style属性的操作
            v-bind:style=String|Object|Array
                String: v-bind完成style样式string变量动态绑定，取值遵循HTML的style属性取值规则
                Object: v-bind完成style样式Object变量动态绑定，取值会被vue进行循环拼接操作
                Array: v-bind完成style样式Array变量动态绑定，数组的每个元素都是一个样式组成对象数据，
                       取值会被vue进行多层循环拼接操作
                       例如：[ {color:'red',……},…… ]
        -->
        <p style="color:red;font-size:26px;">style基础样式</p>
        <p :style=" styleStr ">:style=" styleStr "  styleStr="color:red;font-size:26px;"</p>
        <p :style=" styleObj ">:style=" styleObj "  styleObj='{color:"red",fontSize:"26px"}'</p>
        <p :style=" { color:color,fontSize:size+'px' } ">:style=" { color:'red',fontSize:'26px' } " </p>
        <input type="color" :value="color" @input="color=$event.target.value">
        <input type="range" min="12" max="30" step="2" :value="size" @input="size=$event.target.value">

        <p :style=" styleArr ">:style=" styleArr "  styleArr=[{ color:"red" },{ fontSize:"26px" }] </p>
        <p :style="sobj1">动态color</p>
        <p :style="sobj2">动态fontSize</p>
        <p :style=" [ sobj1,sobj2 ] ">动态color+动态fontSize => 和上面两个标签联动</p>
        <input type="color" :value="sobj1.color" @input="sobj1.color=$event.target.value">
        <input type="range" min="12" max="30" step="2" :value=" parseFloat(sobj2.fontSize) " @input="sobj2.fontSize=$event.target.value+'px'">

        <p style="color:blue" :style=" sobj2 ">动静结合</p>

        <h4>剩余属性绑定</h4>
        <!-- 
        4. 剩余属性的操作 ： 取值应该符合该属性的取值规则
        -->
        <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="" srcset="">
        <br>
        <img :src=" imgSrc " alt="">
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    id:"itany",
                    flag:true,
                    num:10,
                    str:"aa",
                    classStr:"fsborder fc fs bc border",
                    classArr:[ "fsborder","fc","fs","bc","border" ],
                    classObj:{
                        fc:true,
                        fs:true,
                        bc:true,
                        border:true
                    },
                    isFc:true,
                    isFs:true,
                    isBc:true,
                    isBorder:true,
                    userInput:"",
                    btnObj:{
                        "layui-btn":true,
                        "layui-btn-normal":true
                    },
                    isDef:true,
                    styleStr:"color:red;font-size:26px;",
                    styleObj:{
                        color:"red",
                        // "font-size":"26px",
                        fontSize:"26px"
                    },
                    color:"#ff0000",
                    size:26,
                    styleArr:[
                        { color:"red" },
                        { fontSize:"26px" }
                    ],
                    sobj1:{
                        color:"#ff0000"
                    },
                    sobj2:{
                        fontSize:"26px"
                    },
                    imgSrc:"https://www.baidu.com/img/flexible/logo/pc/result.png"
                }
            },
            methods:{
                removeClassStr(arg){
                    // 因为JS的字符串替换方法，是从字符串首尾进行操作的，所以如果出现相同内容，会从字符串首尾开始进行匹配替换
                    // this.classStr = this.classStr.replace(arg,"")
                    let arr = this.classStr.split(" ")
                    let i = arr.indexOf(arg);
                    console.log(arr,i)
                    if(i!=-1){
                        arr.splice(i,1);
                        this.classStr = arr.join(" ")
                    }
                },
                addClassStr(arg){
                    this.classStr = this.classStr + " " + arg
                },
                removeClassArr(arg){
                    let i = this.classArr.indexOf(arg);
                    if(i!=-1){
                        this.classArr.splice(i,1);
                    }
                },
                addClassArr(arg){
                    if(!this.classArr.includes(arg)){
                        this.classArr.push(arg)
                    }
                }
            }
        }).mount("#app")
    </script>
</body>
</html>